<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8" />
	<title>个人注册</title>
	<link rel="icon" href="/static/reg/img/favicon.ico">
	<link rel="stylesheet" type="text/css" href="/static/reg/bootstrap/css/bootstrap.css" />
	<link rel="stylesheet" type="text/css" href="/static/reg/css/index.css">
	<script src="/static/reg/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/reg/js/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<header>
	<a href="http://yomall.com" class="logo">
		<img src="/static/reg/img/logo.png" alt="">
	</a>
	<div class="desc">欢迎注册</div>
	<div class="dfg">
		<span>已有账号？</span>
		<a href="http://auth.yomall.com/login.html">请登录</a>
	</div>
</header>
<section>
	<form action="/reg" method="post" class="one">
		<div class="tips" style="color: red;margin-bottom: 10px"
			 th:text="${errors!=null?(#maps.containsKey(errors, 'msg')?errors.msg:''):''}"></div>
		<div class="register-box">
			<label class="username_label">用 户 名
				<input id="username" name="username" maxlength="12" type="text" placeholder="用户名和登录名">
			</label>
			<div id="user_tips" class="tips" th:text="${errors!=null?(#maps.containsKey(errors, 'username')?errors.username:''):''}"></div>
		</div>
		<div class="register-box">
			<label class="other_label">设 置 密 码
				<input name="password" maxlength="18" type="password" placeholder="建议至少使用两种字符组合">
			</label>
			<div class="tips" th:text="${errors!=null?(#maps.containsKey(errors, 'password')?errors.password:''):''}"></div>
		</div>
		<div class="register-box">
			<label class="other_label">确 认 密 码
				<input maxlength="18" type="password" placeholder="请再次输入密码">
			</label>
			<div class="tips"></div>
		</div>
		<div class="register-box">
			<label class="other_label">手 机 号 码
				<input id="mobile" name="mobile" class="phone" maxlength="11" type="text" placeholder="建议使用常用手机">
			</label>
			<div id="mobile_tips" class="tips" th:text="${errors!=null?(#maps.containsKey(errors, 'mobile')?errors.mobile:''):''}"></div>
		</div>
		<div class="register-box">
			<label class="other_label">验 证 码
				<input name="code" maxlength="6" type="text" placeholder="请输入验证码" class="caa">
			</label>
			<a id="sendCode" href="javascript:void(0)">发送验证码</a>
			<div class="tips" th:text="${errors!=null?(#maps.containsKey(errors, 'code')?errors.code:''):''}"></div>
		</div>
		<div class="arguement">
			<input type="checkbox" id="xieyi"> 阅读并同意
			<a href="#">《优品用户注册协议》</a>
			<a href="#">《隐私政策》</a>
			<div class="tips"></div>
			<br />
			<div class="submit_btn">
				<button type="submit" id="submit_btn">立 即 注 册</button>
			</div>
		</div>
	</form>

	<div class="two">
		<div class="right_r">
			<div class="right_r1">
				<img src="/static/reg/img/a65a18e877a16246a92e1b755bd88a03_03.png" />
				<span>企业用户注册</span>
			</div>
			<div class="right_r2">
				<img src="/static/reg/img/a65a18e877a16246a92e1b755bd88a03_06.png" />
				<span>INTERNATIONAL <br /> CUSTOMERS</span>
			</div>
		</div>
	</div>
</section>

<hr>

<div class="footer">
	<ul>
		<li>
			<a href="">关于我们</a>
		</li>
		<li>|</li>
		<li>
			<a href="">联系我们</a>
		</li>
		<li>|</li>
		<li>
			<a href="">人次招聘</a>
		</li>
		<li>|</li>
		<li>
			<a href="">商家入驻</a>
		</li>
		<li>|</li>
		<li>
			<a href="">广告服务</a>
		</li>
		<li>|</li>
		<li>
			<a href="">手机优品</a>
		</li>
		<li>|</li>
		<li>
			<a href="">友情链接</a>
		</li>
		<li>|</li>
		<li>
			<a href="">销售联盟</a>
		</li>
		<li>|</li>
		<li>
			<a href="">优品社区</a>
		</li>
		<li>|</li>
		<li>
			<a href="">优品公益</a>
		</li>
		<li>|</li>
		<li>
			<a href="">English Site</a>
		</li>
	</ul>

	<p class="bq">Copyright &copy; 2020-2021 优品yomall.com 版权所有</p>
</div>

<script>
	$(function(){
		// 校验用户是否存在
		$('#username').blur(function(){
			let username = $(this).val()
			if (username.trim() !== '') {
				let url = `/check/user/${username}`
				$.get(url, function(data){
					if (data.code != 0){
						$('#user_tips').text('用户已存在')
						$('#user_tips').css({'color':'red'})
						return false
					}
				})
			}
		})

		// 发送短信验证码
		$('#sendCode').click(function(){
			let mobile = $('#mobile').val()
			// 手机号检验
			if (!checkMobile(mobile)) {
				return ;
			}
			if (!$(this).hasClass('disabled')){
				// 手机发送验证码
				let url = `/sms/sendcode?mobile=${mobile}`
				$.get(url, function(data){
					if(data.code !== 0){
						alert(data.msg)
					}
				})
				// 倒计时
				timeoutChangeMsg()
			}
			return false
		})
	})

	let num = 60
	function timeoutChangeMsg(){
		$('#sendCode').attr('class', 'disabled')
		if (num === 0){
			$('#sendCode').attr('class', '')
			$('#sendCode').text('发送验证码')
			num = 60
		} else {
			let msg = `${num}秒后再次发送`
			$('#sendCode').text(msg)
			setTimeout('timeoutChangeMsg()', 1000)
		}
		num--
	}

	// 校验手机号码是否存在
	function checkMobile(mobile){
		let flag = false;
		if(mobile === '' || mobile.trim().length === 0) {
			$('#mobile_tips').text('手机号不能为空')
			$('#mobile_tips').css({'color':'red'})
			return flag;
		} else if (!/^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/.exec(mobile)) {
			$('#mobile_tips').text('手机号格式不正确')
			$('#mobile_tips').css({'color':'red'})
			return flag;
		} else {
			// 检查手机号是否已存在
			let url = `/check/mobile/${mobile}`
			$.ajax({
				type: 'GET',
				url: url,
				dataType: 'json',
				async: false,
				success: function (data) {
					if (data.code != 0){
						$('#mobile_tips').text('手机号已存在')
						$('#mobile_tips').css({'color':'red'})
					} else {
						flag = true;
					}
				}
			})
		}
		return flag;
	}
</script>
</body>

</html>